<template>
  <el-container class="app-layout">
    <!-- 侧边导航栏 -->
    <el-aside :width="sidebarWidth" class="app-aside" :class="{ 'mobile-hidden': isMobile && isCollapsed }">
      <AppSidebar 
        :is-collapsed="isCollapsed"
        :is-mobile="isMobile"
        @toggle-collapse="handleSidebarToggle"
        @menu-click="handleMenuClick"
      />
    </el-aside>
    
    <!-- 移动端遮罩层 -->
    <div 
      v-if="isMobile && !isCollapsed" 
      class="mobile-overlay"
      @click="handleSidebarToggle"
    ></div>
    
    <!-- 主要内容区域 -->
    <el-container class="app-main-container" :class="{ 'mobile-full': isMobile }">
      <!-- 顶部导航栏 -->
      <el-header height="60px" class="app-header">
        <AppHeader 
          :is-collapsed="isCollapsed"
          :is-mobile="isMobile"
          @toggle-sidebar="handleSidebarToggle" 
        />
      </el-header>
      
      <!-- 内容区域 -->
      <el-main class="app-content">
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import AppSidebar from './AppSidebar.vue'
import AppHeader from './AppHeader.vue'

// 侧边栏折叠状态
const isCollapsed = ref(false)
// 移动端状态
const isMobile = ref(false)

// 计算侧边栏宽度
const sidebarWidth = computed(() => {
  if (isMobile.value) {
    return isCollapsed.value ? '0px' : '200px'
  }
  return isCollapsed.value ? '64px' : '200px'
})

// 检查是否为移动端
const checkMobile = () => {
  isMobile.value = window.innerWidth <= 768
  // 移动端默认折叠侧边栏
  if (isMobile.value) {
    isCollapsed.value = true
  }
}

// 处理侧边栏折叠切换
const handleSidebarToggle = () => {
  isCollapsed.value = !isCollapsed.value
}

// 处理移动端菜单点击
const handleMenuClick = () => {
  if (isMobile.value) {
    isCollapsed.value = true
  }
}

// 监听窗口大小变化
const handleResize = () => {
  checkMobile()
}

onMounted(() => {
  checkMobile()
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})
</script>

<style scoped>
.app-layout {
  height: 100vh;
  overflow: hidden;
}

.app-aside {
  background-color: #304156;
  transition: width 0.3s ease;
  overflow: hidden;
}

.app-main-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.app-header {
  background-color: #fff;
  border-bottom: 1px solid #e4e7ed;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  padding: 0;
  display: flex;
  align-items: center;
}

.app-content {
  background-color: #f0f2f5;
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

/* 移动端遮罩层 */
.mobile-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .app-aside {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    height: 100vh;
    transform: translateX(0);
    transition: transform 0.3s ease, width 0.3s ease;
  }
  
  .app-aside.mobile-hidden {
    transform: translateX(-100%);
  }
  
  .app-main-container.mobile-full {
    margin-left: 0;
    width: 100%;
  }
  
  .app-content {
    padding: 15px;
  }
}

@media (max-width: 480px) {
  .app-content {
    padding: 10px;
  }
}
</style>